<template>
  <BaseContainer>
    <ul class="w-100">
			<li class="flex border-box">
				<div class="border-box-red top_bottom">
					<p>专职人员</p>
					<p class="bottom_num">{{ statisticsData.practitioners.directlyUnder }}</p>
				</div>
				<div class="item-block">
					<p>管理人员</p>
					<p>{{ statisticsData.classifyStatistics.managerialStaffTotal }}</p>
				</div>
				<div class="item-block">
					<p>医生人数</p>
					<p>{{ statisticsData.classifyStatistics.doctorTotal }}</p>
				</div>
				<div class="item-block">
					<p>护士人数</p>
					<p>{{ statisticsData.classifyStatistics.nurseTotal }}</p>
				</div>
			</li>
			<li class="flex border-box">
				<div class="border-box-blue top_bottom">
					<p>兼职人员</p>
					<p class="bottom_num">{{ statisticsData.practitioners.temporary }}</p>
				</div>
				<div class="item-block">
					<p>其他医技</p>
					<p>{{ statisticsData.classifyStatistics.medicalTechnicalStaffTotal }}</p>
				</div>
				<div class="item-block">
					<p>护理人员</p>
					<p>{{ statisticsData.classifyStatistics.caregiverTotal }}</p>
				</div>
				<div class="item-block">
					<p>工勤人数</p>
					<p>{{ statisticsData.classifyStatistics.utilityStaffTotal }}</p>
				</div>
			</li>
		</ul>

    <aplid-base-crud ref="crud" class="w-100" v-bind="baseConfig" :paramsObj="paramsObj">
      <template v-slot:ArchivesDialog="{ row, show }">
        <Archives @refresh="handleRefresh" @rechange="handleOperate" :api="baseConfig.api" :key="show" :showBtn="false"
          :nowRowData="row">
        </Archives>
      </template>
    </aplid-base-crud>
  </BaseContainer>
</template>

<script setup lang="ts">
import { inject } from 'vue';
import { baseConfig } from './config'
import Archives from '@/views/datacenter/basicData/practitioner/Archives/index.vue'
import apiMod from '@/apiMod'

let paramsObj = ref({})
const nowRowData: any = inject('nowRowData')||{}
paramsObj.value = { creditCode: nowRowData.creditCode }

let statisticsData = ref({
	practitioners: {
		directlyUnder: 0,
		temporary: 0,
	},
	classifyStatistics: {
		managerialStaffTotal: 0,
		medicalTechnicalStaffTotal: 0,
		doctorTotal: 0,
		caregiverTotal: 0,
		nurseTotal: 0,
		utilityStaffTotal: 0,
	},
})

const crud = ref(null)
const handleRefresh = (query, visible = false) => {
  nextTick(() => {
    crud.value.refreshChange(query)
  })
}
const handleOperate = (type, row, title) => {
  nextTick(() => {
    crud.value.handleOperate(type, row, title)
  })
}

const getStatisticsData = () => {
	apiMod.dpFoundationPractitioners_statistics(nowRowData.creditCode).then((res) => {
		statisticsData.value = res.data
	})
}
onMounted(()=> {
  getStatisticsData()
})
</script>

<style scoped lang="scss">
.card-block {
	width: 240px;
	height: 96px;
	border-radius: 10px;
	position: relative;
	padding: 22px 40px;
}
.border-box {
	display: flex;
	justify-content: space-around;
	align-items: center;
	font-family: 'Microsoft YaHei Bold';
	font-weight: 700;
	font-size: 16px;
	text-align: left;
	color: #1c1c28;
	margin: 10px 0;
	.item-block {
		min-width: vw(140);
	}
	&-red {
		background: linear-gradient(130.84deg, #edf3ff 0%, #f6f9ff 100%);
		border: 1px solid #e4a4ff;
		@extend .card-block;
		&::before {
			content: '';
			width: 8px;
			height: 8px;
			background: #e4a4ff;
			position: absolute;
			top: 30px;
			left: 20px;
			border-radius: 50%;
		}
	}
	&-blue {
		@extend .card-block;
		background: linear-gradient(130.84deg, #dff3ff 0%, #f1fbfe 100%);
		border: 1px solid #a4c4ff;
		&::before {
			content: '';
			width: 8px;
			height: 8px;
			background: #a4c4ff;
			position: absolute;
			top: 30px;
			left: 20px;
			border-radius: 50%;
		}
	}
}
.top_bottom{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	
	.bottom_num{
		font-size: 30px;
		font-style: italic;
	}
}
</style>